<template>
  <div class="container">
    <label class="check-label" v-for="item in list" :key="item.id">
      <input type="checkbox" /><i class="check-box"></i>
      <span>{{ item.name }} </span>
      <!-- <span>描述</span> -->
    </label>
  </div>
</template>
<script>
export default {
  name: "ToDoList",
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="stylus" scoped>
.check-label {
 display  flex
 font-size:14px
 margin-bottom 5px
 cursor: pointer

 input[type="checkbox"] {
      opacity: 0;
      appearance: none;

      & + .check-box {
        content :''
        width:18px
        height :18px
        border: 1px solid rgba(234, 234, 234, 1)
        padding 2px
        border-radius: 3px
        transition: 0.2s
      }

      &:checked + .check-box {
        width: 18px;
        height: 18px;
        border: 1px solid rgba(24, 190, 107, 1);
        border-radius: 3px;
        box-sizing: border-box;
      }

      &:checked + .check-box::after {
       content:''
       position:absolute
       width: 12px;
       height: 6px;
       border: 1px solid rgba(24, 190, 107, 1);
       border-top-color: transparent;
      border-right-color: transparent;
      -ms-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -webkit-transform: rotate(-60deg);
      transform: rotate(-45deg);
      box-sizing: border-box;
      }

      /**兄弟选择器 */
  & ~ span {
   position relative
   white-space:nowrap
   word-wrap:break-word
   margin-left 10px

   &::before {
    position absolute
    content:''
    top:50%
    left:0
    width:100%
    height:1px
    background: rgba(24, 190, 107, 1)
    transform: scaleX(0)
    transform-origin: right
    transition: transform 0.5s
   }
  }

  &:checked ~ span {
   color: rgba(24, 190, 107, 1)
   &::before {
    transform :scaleX(1)
    transform-origin left
   }
  }
 }

}
</style>
